<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* HTML: <div class="loader"></div> */
        .loader {
            width: 40px;
            aspect-ratio: 1;
            border-radius: 50%;
            background: #f03355;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            animation: l1 2s infinite cubic-bezier(0.3, 1, 0, 1);
        }

        @keyframes l1 {
            33% {
                border-radius: 0;
                background: #514b82;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
            }

            66% {
                border-radius: 0;
                background: #ffa516;
                clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%)
            }
        }
    </style>
</head>
   <div class="loader"></div>
<body>

</body>

</html>